<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{msg}}</p>
    <button @click="msg = 'modify Vue'">修改msg</button>
    <button @click="destroy">销毁</button>
    <button @click="msg = 'welcome to vue'">修改msg2</button>
</div>
</body>
<script>
    new Vue({
        el: "#d1",
        data: {
            msg: "Hello Vue"
        }, methods: {
            destroy() {
                // 销毁vue
                // 销毁后Vue失效
                this.$destroy();
            }
        },
        // 生命周期的每一个阶段均存在与之对应的钩子函数
        // 每一个阶段均会执行与之对应的钩子函数
        beforeCreate:function() {
            console.log("创建Vue前");
        },
        created() {
            console.log("成功创建Vue");
        },
        beforeMount() {
            console.log("挂载前");
        },
        mounted() {
            console.log("挂载后");
        },
        beforeUpdate() {
            console.log("修改前");
        },
        updated() {
            console.log("修改后");
        },
        beforeDestroy() {
            console.log("销毁前");
        },
        destroyed() {
            console.log("销毁后");
        }
    })
</script>
</html>